
<style>
    :not(:defined) {
        display: none;
    }
    #export_box:host{
      border:1px solid #191919;
    }
    /* Force the scroll bar to appear so we see it hide when overlay opens. */
    body::-webkit-scrollbar {
        background: lightgray;
    }
  
    body::-webkit-scrollbar-thumb {
        background: darkgray;
    }
   
    
    #top1{
          background: var(--icon-bg-color);
          text-align: center; 
          font-size: 16px;
          font-weight: bold;
          color: #fff;
          position: relative;
          border: none;
          padding: 2px;
      }
      #top1 img{
          position: absolute;
          right: 10px;
          top: 3px;
          cursor: pointer;
      }
      #container3{
        padding: 5px 0px 5px 0px;
        border: none;
        background-color: var(--main-bg-color);
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        width:600px;
        z-index: 2;
        max-height:210px;
        overflow-y: auto;
        justify-content: left;
        user-select:none;
    }
    .info_box{
        float: left;
        width:300px;
        max-height:200px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        padding-top: 5px;
    }
    .btn_box{
        float: left;
        width:140px;
        max-height:200px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        padding-top: 5px;
    }
    .legendCls{
        color:#fff;
    }
    .dtext{
        float: left;
        width: 60px;
        height:35px;
        padding: 1px;
        color: #fff;
    }
    .val{
        float: left;
        width: 250px;
        height:35px;
        padding: 1px;
        color: #fff;
        overflow: hidden;
    }
    .cls_button{
        float: left;
        width: 130px;
        height:35px;
        border: rgb(42, 73, 177) solid 1px;
        background-color: var(--icon-bg-color);
        border-radius: 2px;
        cursor:pointer;
        margin:5px;
        margin-top: 20px;
    }
    .cls_button:focus{
        float: left;
        width: 130px;
        
        height:35px;
        border: rgb(42, 73, 177) solid 1px;
        border-radius: 2px;
        background-image: url("../editor/images/loading.gif");
        background-size: 16px 16px;
        background-repeat: no-repeat;
        background-position: 20px center;
        cursor:pointer;
        margin:5px;
        margin-top: 20px;
    }
    .cls_button:disabled{
        float: left;
        width: 130px;
        height:35px;
        border: rgb(42, 73, 177) solid 1px;
        border-radius: 2px;
        background-color: var(--input-color);
        cursor:pointer;
        margin:5px;
        margin-top: 20px;
    }
    .cls_button_clkd{
        float: left;
        width: 130px;
        height:35px;
        border: rgb(42, 73, 177) solid 1px;
        background-color: var(--icon-bg-color);
        border-radius: 2px;
        cursor:pointer;
        margin:5px;
        margin-top: 20px;
    }
    .cls_button_clkd:disabled{
        float: left;
        width: 130px;
        height:35px;
        border: rgb(42, 73, 177) solid 1px;
        border-radius: 2px;
        background-color: var(--icon-bg-color);
        cursor:pointer;
        margin:5px;
        margin-top: 20px;
    }
    .cls_button_clkd_suc:disabled{
        float: left;
        width: 130px;
        height:35px;
        border: rgb(42, 73, 177) solid 1px;
        border-radius: 2px;
        background-color: yellow;
        cursor:pointer;
        animation:twinkle 0.5s infinite alternate;
        margin:5px;
        margin-top: 20px;
    }
    .cls_bot_btn{
        height:30px;
        width: 100px;
        border: rgb(42, 73, 177) solid 1px;
        border-radius: 2px;
        background-color: var(--icon-bg-color);
        cursor:pointer;
        margin:5px;
    }
    #bot{
        max-height: 40px;
        background-color: var(--main-bg-color);
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
    }
   
  
  </style>
  <elix-dialog id="yk_box" aria-label="export svg" closed>
    <div id="top1"><h>遥控操作</h><img src="./images/close.png" alt="" class="closeYk"></div>
    <div id="container3">
        <fieldset>
            <legend class="legendCls">遥控信息</legend>
        <div class="info_box">
            <div class="dtext">厂站名称:</div>
            <div class="dtext">设备名称:</div>
            <div class="dtext">当前状态:</div>
            <div class="dtext">操作选择:</div>
            <div class="dtext">操作序列:</div>
            <div id="name_yk" class="val">text发电厂</div>
            <div id="device_yk" class="val">test设备</div>
            <div id="yuming_yk" class="val">遥测值</div>
            <div id="state_yk" class="val">遥测无效</div>
            <div id="index_yk" class="val">F01:L01:D01:yx01</div>
        </div>
        </fieldset>
        <fieldset class="btn_box">
            <legend class="legendCls">遥控验证</legend>
            <input id="pwsd1" type="button" class="cls_button"  value="操作人验证"></input>
            <input id="pwsd2" type="button" class="cls_button" value="监护人验证" disabled></input> 
        </fieldset>
        <fieldset class="btn_box">
            <legend class="legendCls">遥控执行</legend>
            <input id="ykyz" type="button" class="cls_button" value="遥控预置" disabled></input>
            <input id="ykzx" type="button" class="cls_button" value="遥控执行" disabled></input>
        </fieldset>
    </div>
    <div id="bot"><input type="button" class="cls_bot_btn" value="关闭"></input></div>
  </elix-dialog>